<style lang="less">
@import "./settingManage.less";
</style>
<template>
  <div>
    <Card>
      <Layout>
        <Sider
          hide-trigger
          style="background: #fff; max-width: 220px; flex: 0 0 220px"
        >
          <Menu
            :active-name="currName"
            theme="light"
            width="auto"
            @on-select="currName = $event"
          >
            <MenuItem name="oss">文件对象存储配置</MenuItem>
            <MenuItem name="sms">短信配置</MenuItem>
            <MenuItem name="email">邮件配置</MenuItem>
            <MenuItem name="vaptcha">Vaptcha验证码</MenuItem>
            <MenuItem name="stopWord">禁用词管理</MenuItem>
            <MenuItem name="notice">系统公告配置</MenuItem>
            <MenuItem name="other">其他配置</MenuItem>
          </Menu>
        </Sider>
        <Content
          :style="{
            padding: '8px 40px',
            minHeight: '550px',
            background: '#fff',
          }"
        >
          <div v-show="currName == 'oss'">
            <div class="setting-title">文件对象存储配置</div>
            <oss />
          </div>
          <div v-show="currName == 'sms'">
            <div class="setting-title">短信配置</div>
            <sms />
          </div>
          <div v-show="currName == 'email'">
            <div class="setting-title">邮箱配置</div>
            <div style="display: flex; position: relative">
              <Form
                ref="emailForm"
                :model="email"
                :label-width="110"
                label-position="left"
                :rules="emailValidate"
              >
                <FormItem label="邮箱服务器" prop="host">
                  <Input
                    type="text"
                    v-model="email.host"
                    placeholder="请输入邮箱服务器Host，例如QQ邮箱为smtp.qq.com"
                    style="width: 380px"
                  />
                </FormItem>
                <FormItem label="发送邮箱账号" prop="username">
                  <Input
                    type="text"
                    v-model="email.username"
                    placeholder="请输入发送者Email账号"
                    style="width: 380px"
                  />
                </FormItem>
                <FormItem label="邮箱授权码" prop="password">
                  <Tooltip
                    placement="right"
                    content="无法编辑时请先点击查看图标"
                  >
                    <Input
                      class="input-see"
                      type="text"
                      v-model="email.password"
                      :readonly="!changedEmailPass"
                      @on-click="seeSecret('EMAIL_SETTING')"
                      icon="ios-eye"
                      placeholder="请输入邮箱授权码，进入邮箱-设置中可找到"
                      style="width: 380px"
                    />
                  </Tooltip>
                </FormItem>
                <FormItem>
                  <Button
                    type="primary"
                    style="width: 100px"
                    :loading="saveLoading"
                    @click="saveEditEmail"
                    >保存更改</Button
                  >
                </FormItem>
              </Form>
              <Spin fix v-if="loading"></Spin>
            </div>
          </div>
          <div v-show="currName == 'vaptcha'">
            <div class="setting-title">Vaptcha验证码配置</div>
            <div style="display: flex; position: relative">
              <Form
                ref="vaptchaForm"
                :model="vaptcha"
                :label-width="110"
                label-position="left"
                :rules="vaptchaValidate"
              >
                <FormItem label="VID" prop="vid">
                  <Input
                    type="text"
                    v-model="vaptcha.vid"
                    placeholder="请输入验证单元VID"
                    style="width: 380px"
                  />
                </FormItem>
                <FormItem label="secretKey" prop="secretKey">
                  <Tooltip
                    placement="right"
                    content="无法编辑时请先点击查看图标"
                  >
                    <Input
                      class="input-see"
                      type="text"
                      v-model="vaptcha.secretKey"
                      :readonly="!changedVaptchaSK"
                      @on-click="seeSecret('VAPTCHA_SETTING')"
                      icon="ios-eye"
                      placeholder="请输入验证单元Key"
                      style="width: 380px"
                    />
                  </Tooltip>
                </FormItem>
                <FormItem>
                  <Button
                    type="primary"
                    style="width: 100px"
                    :loading="saveLoading"
                    @click="saveEditVaptcha"
                    >保存更改</Button
                  >
                </FormItem>
              </Form>
              <Spin fix v-if="loading"></Spin>
            </div>
          </div>
          <div v-show="currName == 'stopWord'">
            <div class="setting-title">禁用词管理</div>
            <stop-word />
          </div>
          <div v-show="currName == 'notice'">
            <div class="setting-title">
              系统公告配置
              <Tooltip content="访问系统公告，右上角弹出" placement="right">
                <Icon
                  type="md-help-circle"
                  size="20"
                  color="#c5c5c5"
                  style="margin-left: 10px; cursor: pointer"
                />
              </Tooltip>
            </div>
            <div style="display: flex">
              <Form
                ref="noticeForm"
                :model="notice"
                :label-width="110"
                label-position="left"
              >
                <FormItem label="公告开关" prop="open">
                  <i-switch v-model="notice.open">
                    <span slot="open">开</span>
                    <span slot="close">关</span>
                  </i-switch>
                </FormItem>
                <FormItem label="展示时长" prop="duration">
                  <Tooltip
                    trigger="hover"
                    placement="right"
                    content="设为0不自动关闭"
                  >
                    <InputNumber
                      :max="1000"
                      :min="0"
                      v-model="notice.duration"
                    ></InputNumber
                    ><span style="margin-left: 5px">秒</span>
                  </Tooltip>
                </FormItem>
                <FormItem label="展示页面" prop="position">
                  <Select
                    v-model="notice.position"
                    placeholder="请选择"
                    style="width: 380px"
                  >
                    <Option value="LOGIN">登录页（访问系统时）</Option>
                    <Option value="HOME">首页（登录系统后）</Option>
                  </Select>
                </FormItem>
                <FormItem label="公告标题" prop="title">
                  <Input v-model="notice.title" style="width: 380px" />
                </FormItem>
                <FormItem label="公告内容" prop="content">
                  <Input
                    type="textarea"
                    v-model="notice.content"
                    :rows="4"
                    placeholder
                    style="width: 380px"
                  />
                </FormItem>
                <FormItem>
                  <Button
                    type="primary"
                    style="width: 100px"
                    :loading="saveLoading"
                    @click="saveEditNotice"
                    >保存更改</Button
                  >
                </FormItem>
              </Form>
              <Spin fix v-if="loading"></Spin>
            </div>
          </div>
          <div v-show="currName == 'other'">
            <div class="setting-title">其他配置</div>
            <div style="display: flex">
              <Form
                ref="otherForm"
                :model="other"
                :label-width="110"
                label-position="left"
                :rules="otherValidate"
              >
                <FormItem label="应用部署域名" prop="domain">
                  <Tooltip placement="right" content="拼接部分资源访问链接使用">
                    <Input
                      type="text"
                      v-model="other.domain"
                      placeholder="请输入应用部署域名前缀，如http://xboot.exrick.cn"
                      style="width: 380px"
                    />
                  </Tooltip>
                </FormItem>
                <FormItem label="单点登录域名" prop="ssoDomain">
                  <Tooltip
                    max-width="250"
                    transfer
                    placement="right"
                    content="该域名及子域名下将可获得单点登录所需数据"
                  >
                    <Input
                      type="text"
                      v-model="other.ssoDomain"
                      placeholder="请输入应用部署一级域名，如exrick.cn"
                      style="width: 380px"
                    />
                  </Tooltip>
                </FormItem>
                <FormItem label="IP黑名单" prop="blacklist">
                  <Input
                    type="textarea"
                    v-model="other.blacklist"
                    :rows="4"
                    placeholder="多个以回车分隔"
                    style="width: 380px"
                  />
                </FormItem>
                <FormItem>
                  <Button
                    type="primary"
                    style="width: 100px"
                    :loading="saveLoading"
                    @click="saveEditOther"
                    >保存更改</Button
                  >
                </FormItem>
              </Form>
              <Spin fix v-if="loading"></Spin>
            </div>
          </div>
        </Content>
      </Layout>
    </Card>
  </div>
</template>

<script>
import {
  seeSecretSet,
  getEmailSet,
  editEmailSet,
  getVaptchaSet,
  editVaptchaSet,
  getOtherSet,
  editOtherSet,
  getNoticeSet,
  editNoticeSet
} from "@/api/index";
import oss from "./oss.vue";
import sms from "./sms.vue";
import stopWord from "./stopWord.vue";
export default {
  name: "setting-manage",
  components: {
    oss,
    sms,
    stopWord,
  },
  data() {
    return {
      currName: "oss",
      loading: false, // 表单加载状态
      saveLoading: false,
      email: {
        host: "",
        username: "",
        password: "",
      },
      changedEmailPass: false, // 是否修改邮件密码
      vaptcha: {
        vID: "",
        secretKey: "",
      },
      changedVaptchaSK: false, // 是否修改Vaptcha的secrectKey
      notice: {
        duration: 10,
      },
      other: {
        domain: "http://127.0.0.1:8888",
        ssoDomain: "",
        blacklist: "",
      },
      emailValidate: {
        // 表单验证规则
        host: [{ required: true, message: "不能为空", trigger: "change" }],
        username: [{ required: true, message: "不能为空", trigger: "change" }],
        password: [{ required: true, message: "不能为空", trigger: "change" }],
      },
      vaptchaValidate: {
        // 表单验证规则
        vid: [{ required: true, message: "不能为空", trigger: "change" }],
        secretKey: [{ required: true, message: "不能为空", trigger: "change" }],
      },
      otherValidate: {
        // 表单验证规则
        domain: [{ required: true, message: "不能为空", trigger: "change" }],
      },
      
    };
  },
  methods: {
    init() {
      this.initEmailSet();
      this.initVaptchaSet();
      this.initNoticeSet();
      this.initOtherSet();
    },
    initEmailSet() {
      this.loading = true;
      getEmailSet().then((res) => {
        this.loading = false;
        if (res.result) {
          // 转换null为""
          for (let attr in res.result) {
            if (res.result[attr] == null) {
              res.result[attr] = "";
            }
          }
          this.email = res.result;
        } else {
          this.changedEmailPass = true;
        }
      });
    },
    initVaptchaSet() {
      this.loading = true;
      getVaptchaSet().then((res) => {
        this.loading = false;
        if (res.result) {
          // 转换null为""
          for (let attr in res.result) {
            if (res.result[attr] == null) {
              res.result[attr] = "";
            }
          }
          this.vaptcha = res.result;
        } else {
          this.changedVaptchaSK = true;
        }
      });
    },
    initOtherSet() {
      this.loading = true;
      getOtherSet().then((res) => {
        this.loading = false;
        if (res.result) {
          // 转换null为""
          for (let attr in res.result) {
            if (res.result[attr] == null) {
              res.result[attr] = "";
            }
          }
          this.other = res.result;
        }
      });
    },
    initNoticeSet() {
      this.loading = true;
      getNoticeSet().then((res) => {
        this.loading = false;
        if (res.result) {
          // 转换null为""
          for (let attr in res.result) {
            if (res.result[attr] == null) {
              res.result[attr] = "";
            }
          }
          this.notice = res.result;
        }
      });
    },
    seeSecret(name) {
      if (!name) {
        return;
      }
      seeSecretSet(name).then((res) => {
        if (res.success) {
          if (this.currName == "sms") {
            this.sms.secretKey = res.result;
            this.changedSmsSK = true;
          } else if (this.currName == "email") {
            this.email.password = res.result;
            this.changedEmailPass = true;
          } else if (this.currName == "vaptcha") {
            this.vaptcha.secretKey = res.result;
            this.changedVaptchaSK = true;
          }
        }
      });
    },
    saveEditEmail() {
      this.$refs.emailForm.validate((valid) => {
        if (valid) {
          this.saveLoading = true;
          this.email.changed = this.changedEmailPass;
          editEmailSet(this.email).then((res) => {
            this.saveLoading = false;
            if (res.success) {
              this.$Message.success("保存成功");
            }
          });
        }
      });
    },
    saveEditVaptcha() {
      this.$refs.vaptchaForm.validate((valid) => {
        if (valid) {
          this.saveLoading = true;
          this.vaptcha.changed = this.changedVaptchaSK;
          editVaptchaSet(this.vaptcha).then((res) => {
            this.saveLoading = false;
            if (res.success) {
              this.$Message.success("保存成功");
            }
          });
        }
      });
    },
    saveEditOther() {
      this.$refs.otherForm.validate((valid) => {
        if (valid) {
          this.saveLoading = true;
          editOtherSet(this.other).then((res) => {
            this.saveLoading = false;
            if (res.success) {
              this.$Message.success("保存成功");
            }
          });
        }
      });
    },
    saveEditNotice() {
      this.saveLoading = true;
      let str = JSON.stringify(this.notice);
      let params = JSON.parse(str);
      if (!this.notice.duration) {
        params.duration = 0;
      }
      editNoticeSet(params).then((res) => {
        this.saveLoading = false;
        if (res.success) {
          this.$Message.success("保存成功");
        }
      });
    },
  },
  mounted() {
    let name = this.$route.query.name;
    if (name) {
      this.currName = name;
    }
    this.init();
  },
};
</script>